<template>
    <div class="amap-task map-zoom" :style="{'height':height}">
        <el-amap :vid="'task' + randomNum" :zoom="zoom" :center="center" class="amap-demo" :plugin="plugin" :style="{'height':height}">
            <el-amap-marker
                    v-if="showExpress"
                    v-for="(marker, index) in bagMarkers"
                    :position="marker.position"
                    :events="marker.events">
                <img src="../../assets/img/loding@2x.png" v-if="marker.type === 'send'"  class="icon-img" style="top: 13px;">
                <img src="../../assets/img/Group15Copy@2x.png" v-if="marker.type === 'collect'" class="icon-img" style="top: 13px;">
            </el-amap-marker>
            <div class="site">
                <el-amap-marker
                        v-if="showSite"
                        v-for="(marker, index) in siteMarkers"
                        :position="marker.position"
                        :events="marker.events">
                    <div style="position:relative;">
                        <div class="marker-span">{{marker.contentRender}}</div>
                        <div>
                            <img src="../../assets/img/jieboddddddddddian@3x.png"  class="icon-img" v-if="myValue['next']['target']['spot_id'] == marker.id">
                            <img src="../../assets/img/jiebodiadddddn@3x.png"  class="icon-img" v-else>
                        </div>
                    </div>
                </el-amap-marker>
            </div>
            <div class="site">
                <el-amap-marker
                        v-if="showDriver"
                        v-for="(marker, index) in driverMarkers"
                        :position="marker.position"
                        :events="marker.events">
                            <img src="../../assets/img/Group7@3x.png"  class="icon-img" style="width: 50px;">
                            <div  class='driver-n color-red'  v-if="myValue['driver_id'] == marker.id">{{marker.contentRender}}</div>
                            <div  class='driver-n'  v-else>{{marker.contentRender}}</div>

                </el-amap-marker>
            </div>

            <template v-for="(polys,index) in poly" v-if="showExpress">
                <el-amap-polyline
                        v-for="(line,index) in polys"
                        :path="line.path"
                        strokeColor="blue"
                        strokeWeight=3
                        strokeStyle="dashed">
                </el-amap-polyline>
            </template>

            <el-amap-info-window
                    v-for="item in windows"
                    :position="item.position"
                    :visible="item.visible"
                    :content="item.content"
                    :events="item.events">
            </el-amap-info-window>

        </el-amap>
        <div class="drawEnclosure">
            <div class="button-group">
                <input type="button" class="btn btn_primary" value="接驳点" @click="showSite = !showSite"/>&nbsp;
                <input type="button" class="btn btn_primary" value="快件信息" @click="showExpress = !showExpress"/>&nbsp;
                <input type="button" class="btn btn_primary" value="司机" @click="showDriver = !showDriver"/>&nbsp;
            </div>
        </div>
    </div>
</template>

<script>
    import {AMapManager} from "vue-amap";
    export default {
        data() {
            return {
                randomNum: Math.floor(Math.random() * 1000000000000000 + 1),
                amapManager: new AMapManager(),
                zoom: 11,
                center: [116.397428, 39.90923],
                driverMarkers: [],
                polyLines: [],
                poly: [],
                plugin: [{
                    pName: 'ToolBar',
                    events: {
                        init(instance) {
                            // console.log(instance);
                        }
                    }
                }],
                bagMarkers: [],  // 收发件
                siteMarkers: [], // 接驳点
                windows: [],
                showSite: false,
                showExpress: true,
                showDriver: false,
                myValue: {},
                selectTip: null
            };
        },
        props: {
            mapData: {
                type: Array,
                default: () => {
                    return []
                }
            },
            siteOption: {
                type: Array,
                default: () => {
                    return []
                }
            },
            driverOption: {
                type: Array,
                default: () => {
                    return []
                }
            },
            connectionPoint: {
                type: Array,
                default: () => {
                    return []
                }
            },
            height: {
                type: String,
                default: '100%'
            },
            value: {
                type: Object,
                default: () => {
                    return {}
                }
            }
        },
        watch: {
            value: {
                handler(value) {
                    this.myValue = this.value;
                },
                deep:true
            },
            myValue: {
                handler(value) {
                    this.$emit('input', value);
                },
                deep: true
            },
            mapData: {
                handler(newValue) {
                    this.getAllInfo(newValue);
                },
                deep:true
            },
            siteOption: {
                handler(newValue) {
                    this.getsiteOption(newValue);
                },
                deep:true
            },
            driverOption: {
                handler(newValue) {
                    this.getDriverOption(newValue);
                },
                deep:true
            }
        },
        mounted() {
            // this.center = this.$store.state.mapCenter;
            this.center = JSON.parse(localStorage.getItem('lnglat'));
        },
        methods: {
            getAllInfo(value) {
                let self = this;
                let line = [];
                this.polyLines = [];
                this.poly = [];
                value.forEach(item => {
                    this.bagMarkers.push(
                        {
                        id: item.id,
                        position:[item.delivery_lon,item.delivery_lat],
                        name: item.delivery_address,
                        type: 'collect',
                        events: {
                            click() {
                                self.windows = [];
                                self.windows = [{
                                    position: [item.delivery_lon,item.delivery_lat],
                                    content: `<div><p><span class="weight">DDID：</span>
                                            ${item['current_lat']},${item['express_number']}</p>
                                            <p><span class="weight">发件：</span>${item['pick_name']},
                                            ${item['pick_phone']},${item['pick_address']}</p>

                                            <p><span class="weight">收件：</span>${item['delivery_name']},
                                            ${item['delivery_phone']},${item['delivery_address']}</p>
                                            <p><span class="weight">状态：</span>${item['dispatch_status_link']}</p>
                                            <p>${item['updated_at']}</p></div>`,
                                    visible: true,
                                    events: {
                                        close() {
                                            self.windows[0].visible = false
                                        }
                                    }
                                }];

                            }
                        }},
                        {
                            id: item.id,
                            position:[item.current_lon,item.current_lat],
                            name: item.pick_address,
                            type: 'send',
                            events: {
                                click() {
                                    self.windows = [];
                                    self.windows = [{
                                        position: [item.current_lon,item.current_lat],
                                        content: `<div><p><span class="weight">DDID：</span>
                                            ${item['current_lat']},${item['express_number']}</p>
                                            <p><span class="weight">发件：</span>${item['pick_name']},
                                            ${item['pick_phone']},${item['pick_address']}</p>
                                            <p><span class="weight">收件：</span>${item['delivery_name']},
                                            ${item['delivery_phone']},${item['delivery_address']}</p>
                                            <p><span class="weight">状态：</span>${item['dispatch_status_link']}</p>
                                            <p>${item['updated_at']}</p></div>`,
                                        visible: true,
                                        events: {
                                            close() {
                                                self.windows[0].visible = false
                                            }
                                        }
                                    }];

                                }
                            }
                        }
                        );
                    line = [[item.delivery_lon,item.delivery_lat],[item.current_lon, item.current_lat]];

                    let lines = {
                        path: line
                    };
                    this.polyLines.push(lines)
                    this.poly.push(this.polyLines)
                    // console.info('连线', this.poly);
                });
                // this.center = this.bagMarkers[0].position;
            }, // 获取标记 文字，司机等信息
            getsiteOption(value) {
                let self = this;
                value.forEach(item => {
                    this.siteMarkers.push({
                        id: item.id,
                        position:[item.lon,item.lat],
                        contentRender: item.name,
                        events: {
                            click(e) {
                                self.myValue['mission']['target']['spot_id'] = item.id;
                                self.myValue['next']['target']['spot_id'] = item.id;

                            }
                        }
                    });
                });
            },
            getDriverOption(value) {
                let self = this;

                value.forEach(item => {
                    if (item.lng && item.lat) {
                        self.driverMarkers.push({
                            id: item.id,
                            position:[item.lng,item.lat],
                            contentRender: item.name,
                            events: {
                                click(e) {
                                    // self.myValue['mission']['target']['driver_id'] = item.id;
                                    self.myValue['driver_id'] = item.id;
                                    // self.myValue['next']['target']['driver_id'] = item.id;

                                }
                            }
                        });
                    }

                });
            }
        }
    };
</script>

<style lang="less" scoped>
    @import url('./map.less');
    .amap-task {
        height: 100%;
        margin-bottom: 20px;
        position: relative;
        .driver-n{
            width: 100%;
            font-size: 12px;
            position: absolute;
            top: 1px;
            left:-4px;
            text-align: center
        }
        .color-red{
            color: red;
            font-weight: 600;
        }
        .icon-img{
            width: 20px;
            position: relative;
            /*top: 0px;*/
            /*left: -4px;*/
        }
        .site{
            .amap-overlays{
                top: -28px !important;
                left: 20px !important;
            }
        }

        .marker-span{
            position: absolute;
            top: -20px;
            left: -14px;
            white-space: nowrap;
            color: #000;
            z-index: 10;
            /*width: 44px;*/
            text-align: center;
            font-size: 12px;
            font-weight: 600;
            /*background-color: #fff;*/
        }


    }
</style>
